<script setup lang="ts">
import defaultIcon from '@imgs/3d/icon1.webp'

interface CardBannerProps {
  icon?: string
  title: string
  description: string
  buttonText?: string
  buttonColor?: string
  buttonTextColor?: string
  showCancel?: boolean
  cancelButtonText?: string
  cancelButtonColor?: string
  cancelButtonTextColor?: string
}

const props = withDefaults(defineProps<CardBannerProps>(), {
  icon: defaultIcon,
  title: '',
  description: '',
  buttonText: '重试',
  buttonColor: 'var(--main-color)',
  buttonTextColor: '#fff',
  showCancel: false,
  cancelButtonText: '取消',
  cancelButtonColor: '#f5f5f5',
  cancelButtonTextColor: '#666'
})

const emit = defineEmits<{
  (e: 'click'): void
  (e: 'cancel'): void
}>()

const handleClick = () => {
  emit('click')
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<template>
  <div class="card-banner art-custom-card">
    <div class="banner-content">
      <div class="banner-icon">
        <img :src="props.icon" :alt="props.title"/>
      </div>
      <div class="banner-text">
        <p class="banner-title">{{ props.title }}</p>
        <p class="banner-description">{{ props.description }}</p>
      </div>
      <div class="banner-buttons">
        <div
          v-if="showCancel"
          class="banner-button cancel-button"
          :style="{ backgroundColor: cancelButtonColor, color: cancelButtonTextColor }"
          @click="handleCancel"
        >
          {{ cancelButtonText }}
        </div>
        <div
          class="banner-button"
          :style="{ backgroundColor: buttonColor, color: buttonTextColor }"
          @click="handleClick"
        >
          {{ buttonText }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card-banner {
  padding: 3rem 0 4rem;
  background-color: var(--art-main-bg-color);
  border-radius: calc(var(--custom-radius) + 2px) !important;

  .banner-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .banner-icon {
    width: 180px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .banner-text {
    .banner-title {
      margin-bottom: 8px;
      font-size: 18px;
      font-weight: 600;
      color: var(--art-text-gray-800);
    }

    .banner-description {
      margin: 0;
      font-size: 14px;
      color: var(--art-text-gray-600);
    }
  }

  .banner-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .banner-button {
    display: inline-block;
    height: var(--el-component-custom-height);
    padding: 0 12px;
    font-size: 14px;
    line-height: var(--el-component-custom-height);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.9;
    }

    &.cancel-button {
      border: 1px solid #dcdfe6;
    }
  }
}
</style>
